<template>
  <div class="hello">
    
    <div class="float" @click="ShowOrder" v-show="number">
        <p>{{number}}单</p>
        <small>进行中</small>
    </div>

    <div class="js_dialog" v-show="isDialog" v-on:touchstart.stop>
        <div class="weui-mask" style="opacity: 0.5;"  @click="hideDialog"  v-on:touchstart.prevent></div>
        <div class="weui-dialog" v-on:touchstart.stop>
            <div class="dialog-title"><span class="back iconfont icon-Dd_xqfh" v-show="activeNo" @click="back"></span>我的带餐</div>
            <div class="weui-dialog__bd dialog-content">

              <div class="dialog-card" v-for="item in menulist" @click="det(item)" v-show="!activeNo">
                  <p class="taken-address"><span></span>取餐点:{{item.canteen_shop}}</p>
                  <p class="taken-name">{{item.recipient}}</p>
                  <p class="paid-time">下单时间:{{item.paid_at}}</p>
                  <p class="arrive-time">送单时间:{{item.appointment_at}}</p>
                  <div class="leave-time">
                    <p class="hm">{{item.appointment_at | timeNew}}'</p>
                    <p class="lt">距离本单结束时间</p>
                  </div>
              </div>

              <div class="detail" v-if="activeNo">
                <p>取餐点:{{order.foods.data[0].canteen+order.foods.data[0].shop.data.name}}</p>
                <div class="foodlist" v-for="item in order.foods.data">
                  <p>{{item.name}}</p>
                  <p>X{{item.quantity}}</p>
                  <p>￥{{item.price}}</p>
                </div>
                <p>收货地址:{{order.address}}</p>
                <p>送达时间:{{order.appointment_at}}</p>
                <p>联系电话: <a v-bind:href="'tel:'+(order.orderer.phone)">{{order.orderer.phone}}</a></p>
                <p>备注:{{order.mark}}</p>
              </div>

            </div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn cancle" @click="hideOrder"><span class="iconfont icon-Sy_cha" v-show="!activeNo"></span><p  v-show="activeNo">确认送达</p></a>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'

Vue.filter('timeNew', function(time){
  let string = time.split(':');
  let min = parseInt(string[0]*60)+parseInt(string[1]);
  let current = new Date();
  let localMin = current.getHours()*60+current.getMinutes();
  let res = Number;
  if(min - localMin > 0){
    res = min - localMin
  }else{
    res = 0;
  }
  return res
})

export default {
  name: 'mstatus',
  data () {
    return {
      isDialog:false,
      number:null,
      menulist:null,
      order:null,
      activeNo:false,
    }
  },
  methods:{
    getDown() {
      
    },
    getTaken() {
      this.$http.get('/api/orders/takelist/me?updown=down&id=0').then((res) => {
        this.menulist = res.body.data;
        this.number = res.body.data.length;

      });
    },
    ShowOrder:function(){
      this.isDialog = true;
    },
    hideDialog() {
      this.isDialog = false;
    },
    hideOrder() {
      if(this.activeNo == true){
        let id  = this.order.id;
        var _this = this;
        this.$http.get('/api/order/delivered/'+id).then((res) => {
          console.log('确认送达');
          _this.getTaken();
          _this.activeNo = false;
        });
        this.isDialog = false;
      }else{
        this.isDialog = false;
      }
    },
    det(item) {
      this.$http.get('/api/order/show/'+item.id).then((res)=>{
        this.order = res.body.data;
        this.activeNo = true;
      });
    },
    back() {
      this.activeNo = false;
    }
  },
  created() {
    this.getTaken();
    // var _this = this;
    // setInterval(function(){
    //   if(_this.countdown>0){
    //     _this.countdown--;
    //     console.log(_this.countdown);
    //   }
    // },3000)
  },
  computed() {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.float{
  height: 6rem;
  width: 6rem;
  color:#fff;
  text-align: center;
  position: fixed;
  bottom: 6.8rem;
  left: 1.5rem;
  border-radius: 50%;
  background-color: #ff4d4d;
  box-shadow: 0px 0px 5px 0px #ff4d4d;
}
.float p{
  margin-top: 8px;
  font-size: 18px;
}
.float small{
  font-size: 12px;
}
.weui-dialog__bd{
  padding: 0.8rem 0;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  color: #999999;
}
.dialog-title{
  font-size: 20px;
  color: #969696;
  background-color: #f6f5f5;
  padding: 12px 0;
}
.dialog-card{
  padding:0 1rem;
  text-align: left;
  font-size: 16px;
  position: relative;
  border-bottom: 0.8rem solid #f6f5f5;
}
.dialog-card p{
  line-height: 26px;
}
.taken-address{
  color:#3f3f3f;
  border-bottom: 1px solid #bababa;
}
.taken-name{
  font-size: 16px;
}
.paid-time,.arrive-time{
  font-size: 12px!important;
}
.weui-dialog__ft{
  background-color: #ff4d4d;
}
.leave-time{
  position: absolute;
  right: 0.8rem;
  bottom: 0;
}
.leave-time .hm{
  font-size: 44px;
  color: #ff4d4d;
  line-height: 48px;
  text-align: right;
}
.leave-time .lt{
  font-size: 12px;
  color: #3f3f3f;
}
.dialog-content{
  height:220px;
  overflow: scroll;
  -webkit-overflow-scrolling:touch; 
}
.cancle .iconfont{
  color: #fff;
  font-size: 30px;
}
.cancle p{
  color:#fff;
}
.weui-mask{
  z-index: 1003;
}
.detail{
  padding:12px;
  color: #3f3f3f;
  text-align: left;
}
.detail{
  line-height: 20px;
}
.foodlist{
  font-size: 16px;
  display:flex;
  display: -webkit-flex;
  
}
.foodlist p{
  color: #3f3f3f;
}
.foodlist p:nth-child(1){
  flex: 3;
  -webkit-flex:3;
}
.foodlist p:nth-child(2){
  flex: 1;
  -webkit-flex:1;
  color:#969696;
}
.foodlist p:nth-child(2){
  flex: 1;
  -webkit-flex:1;
}
.back{
  color: #ff4d4d;
  position: absolute;
  font-size: 20px;
  top: 12px;
  left: 8px;
}
</style>
